<template>
	<view class="full-parent flex-column detail">
		<z-paging-swiper>
			<template #top>
				<view class="tabs-container">
					<view v-for="(item,index) in catalogs" :key="index"
						:class="(current == index) ? 'tabs-select' : 'tabs-normal'" @click="tabsClick(index)">
						{{item}}
					</view>
				</view>
			</template>

			<swiper @change="swiperChange" :current="current">
				<swiper-item>
					<xuexi-detail-info :info='info'></xuexi-detail-info>
				</swiper-item>

				<swiper-item>
					<xuexi-detail-catalog :info='info' :current="current" :tabIndex="1"></xuexi-detail-catalog>
				</swiper-item>

				<swiper-item>
					<xuexi-detail-attachment :info='info' :current="current" :tabIndex="2"></xuexi-detail-attachment>
				</swiper-item>
			</swiper>

			<template #bottom>
				<view class="bottom flex-column">
					<view class="flex-column">
						<view v-if="true" class="bottom-buy flex-row">
							<uni-icons type="cart-filled" color="white" size="30"></uni-icons>
							<view class="bottom-buy-tip">购买</view>
						</view>
						<view v-else class="bottom-buyed flex-row">已购买</view>
					</view>
					<view class="safe-area-inset-bottom"></view>
				</view>
			</template>
		</z-paging-swiper>
	</view>
</template>

<script setup>
	import {
		onLoad,
	} from '@dcloudio/uni-app'

	import {
		ref
	} from 'vue';

	const catalogs = ref(["基本信息", "目录", "课程附件"])

	const current = ref(0);

	const db = uniCloud.importObject('courseObj')

	const info = ref(null)

	onLoad(params => {
		getDetail(params.id)
	})

	async function getDetail(id) {
		let res = await db.getDetail(id)
		info.value = res.data
	}

	function tabsClick(paramters) {
		current.value = paramters
	}

	function swiperChange(e) {
		current.value = e.detail.current
	}
</script>

<style lang="scss" scoped>
	.detail {
		.tabs-container {
			display: flex;
			height: 80rpx;

			.tabs-select {
				flex: 1;
				font-size: 32rpx;
				color: #798490;
				background-color: white;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.tabs-normal {
				flex: 1;
				font-size: 32rpx;
				color: #fff;
				background-color: #798490;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		swiper {
			height: 100%;
			background-color: white;
		}

		.bottom {
			display: flex;
			background-color: white;
			padding: 15rpx 40rpx;
			height: 110rpx;
			justify-content: center;
			border-top: 1rpx solid $me-color-background;

			.bottom-buy {
				background-color: #E40C39;
				border-radius: 8rpx;
				justify-content: center;
				align-items: center;
			}

			.bottom-buy-tip {
				color: white;
				margin-left: 10rpx;
				font-size: 32rpx;
			}

			.bottom-buyed {
				background-color: $me-color-background;
				border-radius: 8rpx;
				justify-content: center;
				align-items: center;
				color: $me-color-gray-2;
				font-size: 32rpx;
			}
		}

	}
</style>